<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>linear-gradient-线性渐变</title>
	</head>

	<body>
		<!--
        background-image: linear-gradient(方向? , 颜色 百分比? , 颜色 百分比? , 颜色 百分比? , ...颜色 百分比?)
     -->
		<div></div>
		<style>
			div {
				height: 200px;
				width: 200px;
				/* 不支持渐变的浏览器回退方案 */
				background-color: #f07575;
				background-image:
				/* 从右下到左上、从蓝色渐变到红色 */ linear-gradient(to left top, blue, red);

				/* 从上到下，从red开始渐变、到高度25%是orange，到50%是yellow ，到75%是green，终点是blue  ，起点和终点可以不写百分比*/
				/* linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%); */
				/* linear-gradient(180deg,red 0%, orange 25%, yellow 50%, green 75%, blue 100%); */
				/* linear-gradient(to bottom, red 0%, orange 25%, yellow 50%, green 75%, blue 100%); */

				/* 从下到上，从蓝色开始渐变、到高度70%位置是绿色，然后从绿色渐变开始、最后以红色结束 */
				/* linear-gradient(0deg, blue, green 70%, red); */

				/* 从下到上然后渐变轴为45度，从 左下角蓝色 渐变到30%为红色，然后从红色渐变到右上角红色 */
				/* linear-gradient(45deg, blue, red 30%, teal); */

				/* 从有到左渐变，从orange渐变到30%pink，再从pink渐变到60%red，再从red渐变到75%teal，因为没写终点，所以从75%直到终点都是teal */
				/* linear-gradient(to left, orange, pink 30%, red 60%, teal 75%); */

				/* 从上到下渐变，默认颜色之间的中点是两个颜色颜色转换的中点,即均衡渐变，通过颜色之间设置百分比，可以将中点移动到这两个颜色之间的任意位置 */
				/* linear-gradient(red, 50%, blue); */
				/* linear-gradient(red, 90%, blue); */

				/* 从上到项，从红色在40%的位置，本应在此处渐变到黄色的，但是黄色的定义位置小于前者，所以忽略此处定义,突变为黄色，再渐变到65%的蓝色，最后终于蓝色。 */
				/* linear-gradient(red 40%, yellow 30%, blue 65%); */

				/* 应用  */
				/* linear-gradient(217deg, rgba(255, 0, 0, .8), rgba(255, 0, 0, 0) 70.71%),
                linear-gradient(127deg, rgba(0, 255, 0, .8), rgba(0, 255, 0, 0) 70.71%),
                linear-gradient(336deg, rgba(0, 0, 255, .8), rgba(0, 0, 255, 0) 70.71%); */

				border: 20px solid;
				/* border 渐变  但不支持圆角 */
				border-image: linear-gradient(to right, #8f41e9, #578aef) 4;
			}
		</style>
	</body>
</html>
